<template>
    <div>
        <headers></headers>
        <div style="padding:1.8vh 3.2vw;height:calc(100vh - 3.69rem);overflow: auto;" v-infinite-scroll="load" :infinite-scroll-disabled="disabled">
            <div class="content-px-box">
                <li v-for="(item) in list" :key='item.id' @click="clickLi(item)">
                    <div>
                        <span>
                        {{item.title}}
                        </span>
                        <!-- {{item.update_time?item.update_time.split(' ')[0]:item.create_time.split(' ')[0]}} -->
                        <p>{{item.create_time}}</p>
                    </div>
                    <img :src="item.cover" alt="">
                </li>
            </div>
        </div>
        <!-- <footers></footers> -->
    </div>
</template>

<script>
import headers from '../header'
// import footers from '../footer'
import {articleList} from '@/api/apply.js'
import'@/styles/mobile.css';
export default {
    components:{headers},
    data() {
        return {
            list:[
            ],
            limit:5,
            total:30,
            disabled:true
        }
    },
    watch:{
    },
    methods: {
        seach(){
            articleList({page:1,limit:this.limit,category:'培训动态'}).then(res=>{
                if(res.code==200){
                    this.total = res.data.count
                    this.list = res.data.list
                    this.disabled=false
                }
            })
        },
        load(){
            if(this.limit >= this.total){
                this.disabled = true
                this.$message.warning('没有更多了哟！！！！')
            }else{
                this.limit+=6
                this.seach()
            }
        },
        clickLi(row){
            this.$router.push({
                path:'/regulations/details',
                query:{
                    content:row.content,
                    title:row.title,
                    date:row.create_time,
                }
            })
        }
    },
    created() {
        this.seach()
    },
}
</script>

<style lang="scss" scoped>
    .content-px-box{
        display: flex;
        flex-direction: column;
        li{
            display: flex;
            justify-content: space-between;
            flex:1;
            height:12vh;
            padding:1.8vh 3.2vw;
            border-radius: 6px;
            background: #fff;
            margin-bottom:1.8vh;
            img{
                width:26.7vw;
                height:12vh;
            }
            div{
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                padding-right:3.2vw;
                span{
                    font-size: 1rem;
                    font-weight: 700;
                }
            }
        }
    }
</style>